<template>
  <form action="javascript:void(1);" class="login-form">
    <div class="public-node username">
      <span class="icon">
        <i class="iconfont icon-yonghum"></i>
      </span>
      <input type="text" class="user-input" placeholder="请输入手机号" />
    </div>
    <div class="code">
      <div class="public-node">
        <span class="icon">
          <i class="iconfont icon-mima"></i>
        </span>
          <input type="text" class="code-input" placeholder="请输入验证码" />
      </div>
      <div class="public-node btn-code">获取验证码</div>
    </div>
    <div class="public-node name">
      <span class="icon">
        <i class="iconfont icon-xingming001"></i>
      </span>
      <input type="text" class="code-input" placeholder="请输入姓名" />
    </div>
    <div class="public-node xsi-type">
      <i class="iconfont icon-card-type002"></i>
      <span class="select">请选择证件类型</span>
      <i class="iconfont icon-a-xiala1004"></i>
    </div>
    <div class="public-node xsi-code">
      <i class="iconfont icon-card-type003"></i>
      <input type="text" class="code-input" placeholder="请输入证件号码" />
    </div>
    <div class="btn-group">
      <van-button type="primary" plain class="btn btn-plain-primary" round>取消</van-button>
      <van-button type="primary" class="btn btn-primary" round>绑定</van-button>
    </div>
  </form>
</template>

<script lang="ts">
import { Button as VanButton } from "vant";
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    VanButton,
  },
});
</script>

<style scoped lang="scss">
@import "~@/assets/scss/pub.scss";

.login-form{
  padding: pxToVw(50) pxToVw(70);
}

.iconfont{
  font-size: pxToVw(40);
  color: #9b9b9b;
}

.public-node{
  margin-bottom: pxToVw(30);
  padding: pxToVw(20) pxToVw(40);
  border: 1px solid #e5e5e5;
  border-radius: pxToVw(100);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  input{
    font-size: pxToVw(28);
    border: none;
    padding: 0 pxToVw(20);
    &::-webkit-input-placeholder {
      color: #6C6C6C;
    }
  }
}
.btn-group{
  padding: 0;
}
.select{
  color: #6C6C6C;
  font-size: pxToVw(28);
}
.code{
  display: flex;
  justify-content: space-between;
  .public-node{
    font-size: pxToVw(28);
    width: pxToVw(391);
    .code-input{
      width: 90%;
    }
  }
  .btn-code{
    padding: 0;
    width: pxToVw(190);
    display: flex;
    justify-content: center;
  }
}

</style>
